<template>
  <div id="labelRecommendShow">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:labelRecommendShow:add'"
        type="warning"
        icon="el-icon-plus"
        @click="addBtn"
      >
        添加
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="标签ID"
        prop="labelId"
        show-overflow-tooltip
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="标签名称"
        prop="labelName"
        min-width="130"
      ></el-table-column>
      <el-table-column
        label="所属标签分类"
        prop="contentCategoryLabelName"
        min-width="130"
      ></el-table-column>
      <el-table-column
        label="备注"
        prop="remark"
        min-width="130"
      ></el-table-column>
      <el-table-column label="标签属性" prop="labelProperty" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.labelProperty | filterName('labelsAttr') }}
        </template>
      </el-table-column>
      <el-table-column
        label="包含内容数"
        prop="count"
        min-width="130"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.count !== null">{{ scope.row.count }}</span>
          <el-button
            v-else
            type="text"
            @click="showNum(scope.row.labelId, scope.$index)"
            >查看数量</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        v-permission="'wh:system:labelRecommendShow:status'"
        label="推荐状态"
        prop="enabled"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
            :active-value="true"
            :inactive-value="false"
            active-color="#1DC8A4"
            @change="
              changeStatus(scope.row.enabled, scope.row.id, scope.$index)
            "
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="最新操作时间"
        show-overflow-tooltip
        prop="createdDate"
        width="150"
      >
      </el-table-column>
      <el-table-column
        label="标签操作员"
        prop="createdUser.userName"
        min-width="120"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:system:labelRecommendShow:move'"
            v-if="scope.row.enabled"
            type="text"
            @click="goUp(scope.row.id, scope.$index)"
          >
            上移
          </el-button>
          <el-button
            v-permission="'wh:system:labelRecommendShow:move'"
            v-if="scope.row.enabled"
            type="text"
            @click="goDown(scope.row.id, scope.$index)"
          >
            下移
          </el-button>
          <el-button
            v-permission="'wh:system:labelRecommendShow:detaile'"
            type="text"
            @click="changeView(scope.row.labelId)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      :pageAry="[30]"
      @searchList="searchList"
    ></pageCom>
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogAddEdit>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getContNum } from '@/api/contentTags/configureTation'
import {
  getRecommentList,
  up,
  down,
  open,
  stop
} from '@/api/contentTags/recomment' // 接口
import topSearch from '@component/contentTags/labelRecommendShow/topSearch' // 上部搜索条件
import dialogAddEdit from '@component/contentTags/common/showHideLabelDialogAddEdit' // 新增弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'rec',
  msg: '显性标签推荐',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogAddEdit
  },
  data() {
    return {
      loading: false,
      total: 0,
      tableData: [], // table内容
      channelList: {}, //频道对象
      pageName: 'labelRecommendShow',
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 30 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        channel: '', // 频道
        enabled: '', // 推荐状态
        labelName: '', // 标签名称
        operationUserId: '' // 标签操作员
      },
      dialogData: {
        //新增弹窗
        labelProperty: '', // 标签属性
        channel: '', // 频道
        channelName: '', // 频道中文
        isShow: false // 默认隐藏
      },
      dialogNumData: {
        //包含内容数弹窗
        isShow: false, // 默认隐藏
        id: ''
      },
      powerStr: 'system:labelRecommendShow:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    // this.getPower()
    //属性
    this.getAttrChannel()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
          return
        }
        this.canShowPage = true
      })
    },
    /*获取属性、频道中文名称*/
    async getAttrChannel() {
      //频道
      let list2 = await sysNormalDisable('sys_topic_channel')
      list2.forEach((item) => {
        this.channelList[item.dictValue] = item.dictLabel
      })
    },
    /* 获取列表 */
    searchList() {
      if (!this.canGetList) return
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      //TODO:后期删除  bengin
      obj.labelProperty = 'SHOW_TAG'
      //TODO:后期删除  end
      getRecommentList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    /*显示数量弹窗*/
    showNum(id, index) {
      getContNum(
        id,
        (response) => {
          this.tableData[index].count = response
        },
        (response) => {
          this.$message.warning('获取内容数失败,' + response.message)
          this.loading = false
        }
      )
      /*this.tableData[index].count=0
      this.dialogNumData.id = id
      this.dialogNumData.isShow = true*/
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 创建标签 */
    addBtn() {
      this.dialogData.labelProperty = 'SHOW_TAG'
      this.dialogData.channel = this.formInline.channel

      this.dialogData.channelName = this.channelList[this.formInline.channel]
      this.dialogData.isShow = true
    },
    // 状态切换提示
    async changeStatus(status, id, index) {
      let _this = this
      if (status === false) {
        // 停用
        this.$confirm(`确定停用标签推荐吗？`, '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            stop(
              id,
              (response) => {
                this.$message.success('操作成功')
                this.searchList()
              },
              (response) => {
                this.tableData[index].enabled = true
                this.$message.warning(response.message)
              }
            )
          })
          .catch(() => {
            this.tableData[index].enabled = true
            /* this.$message({
                       type: "info",
                       message: "已取消停用"
                     }); */
          })
      } else {
        // 启用
        open(
          id,
          (response) => {
            this.$message.success('操作成功')
            this.searchList()
          },
          (response) => {
            this.tableData[index].enabled = false
            this.$message.warning(response.message)
          }
        )
      }
    },
    /*上移*/
    goUp(id, index) {
      let { pageNum } = this.searchParams
      if (index === 0 && pageNum == 1) {
        this.$message.warning('已经是第一条数据，无法上移')
        return
      }
      up(
        id,
        (response) => {
          if (index === 0) {
            //当前列表第一条数据，上移需请求接口
            this.searchList()
            this.$message.success('操作成功')
            return
          }
          let cur = this.tableData[index]
          this.tableData.splice(index, 1)
          this.tableData.splice(index - 1, 0, cur)
          this.$message.success('操作成功')
        },
        (response) => {
          this.$message.warning('操作失败,' + response.message)
        }
      )
    },
    /*下移*/
    goDown(id, index) {
      let { pageNum, pageSize } = this.searchParams
      let lastIndex = this.tableData.length - 1
      if (index === lastIndex && pageNum * pageSize >= this.total) {
        this.$message.warning('已经是最后一条数据，无法下移')
        return
      }
      down(
        id,
        (response) => {
          if (index === lastIndex) {
            //当前列表最后一条数据，下移需请求接口
            this.searchList()
            this.$message.success('操作成功')
            return
          }
          let item = this.tableData[index]
          this.tableData.splice(index, 1)
          this.tableData.splice(index + 1, 0, item)
          this.$message.success('操作成功')
        },
        (response) => {
          this.$message.warning('操作失败,' + response.message)
        }
      )
    },
    /* 跳转页面 */
    changeView(id) {
      let query = {
        from: this.pageName,
        id
        // mId: this.$route.query.mId
      }
      this.$router.push({
        name: 'wh:poly:content:show',
        // params: { id },
        query: query
      })
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
// #labelRecommend {

//   .table-conBtn {
//   }
// }
</style>
